<template>
  <div class="box" :class="disabled ? 'disabled' : ''" v-if="showBox">
    <div
      class="title"
      v-for="item in items"
      :key="item.name"
      @click="handleClick(item.name)"
      :class="{ active: item.name === '图层' && isshow }"
    >
      <i :class="['iconfont', item.icon]"></i>
    </div>
  </div>
  <div class="lineBox" v-if="isshow && lines">
    <div class="selectAll">
      <input type="checkbox" v-model="selectAllLines" />
      <span>全选</span>
    </div>
    <div v-for="(line, index) in lines" :key="line.id" class="lineItem">
      <input type="checkbox" :id="line.id" v-model="line.visible" />
      <span>{{ line.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import { useLineData } from '@/store'
import htmlMarker from '@/cesiumTools/Bubble/htmlMarker.js'
import CesiumNavigation from 'cesium-navigation-es6'

import {
  renderAll,
  hideLineByName,
  hideStationByName,
  changeDisplayBillBoard,
} from '@/cesiumTools/effectController'
const disabled = ref(false)

const lineStore = useLineData()
let viewer
let lineData
let lineStation
const showBox = ref(true)
onMounted(() => {
  viewer = lineStore.viewer
  lineData = lineStore.lineData
  lineStation = lineData.map((item) => {
    return {
      name: item.name,
      stations: item.stationsList,
    }
  })
  // renderAll(viewer, lineData)
})

const items = ref([
  { name: '截图', icon: 'icon-jietu' },
  { name: '图层', icon: 'icon-layers' },
  { name: '全屏', icon: 'icon-fullscreen-copy' },
])
const isshow = ref(false)
const lines = ref([])
let isDevelopmentHistory = false

//监听路由跳转
const router = useRouter()
const routeName = toRaw(router).currentRoute.value.fullPath.split('/')[1]

watch(
  () => toRaw(router).currentRoute.value.fullPath.split('/')[1],
  (value) => {
    showBox.value = value === 'siteManagement' ? false : true
    isDevelopmentHistory = value === 'developmentHistory' ? false : true
    isshow.value = false
  },
  { immediate: true }
)

// 点击事件显示/隐藏线路选择框
function handleClick(name) {
  if (name === '图层' && isDevelopmentHistory) {
    isshow.value = !isshow.value
  } else if (name === '截图') {
    saveToImage(viewer)
  } else if (name === '全屏') {
    toggleFullScreen()
  }
}

// 生成 lines 数组
const generateLines = (count) => {
  const linesArray = []
  for (let i = 1; i <= count; i++) {
    linesArray.push({ id: `line${i}`, name: `${i}号线`, visible: true })
  }
  return linesArray
}
// 使用 generateLines 函数生成 lines 数组
lines.value = generateLines(8)

//全选按钮的计算属性
const selectAllLines = computed({
  get() {
    return lines.value.every((line) => line.visible)
  },
  set(value) {
    lines.value.forEach((line) => {
      line.visible = value
    })
  },
})

// 监听每个 line 的 visible 属性变化
watch(
  lines,
  (value) => {
    value.forEach((line) => {
      const name = `轨道交通${line.name}`
      //传入name 和复选框的状态
      toggleLineAndStations(name, line.visible)
    })
  },
  { deep: true }
)

// 切换线路和站点的显示隐藏
function toggleLineAndStations(name, visible) {
  hideLineByName(name, visible)
  const res = lineStation.filter((item) => item.name === name)
  res.forEach((item) => {
    item.stations.forEach((station) => {
      hideStationByName(station.name, visible)
      changeDisplayBillBoard(station.name, visible)
    })
  })
}

// 全屏功能
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

//当进入发展历程功能模块时，Toolbar.vue的功能不可以使用，将处于disabled的状态
// lineStore.$onAction(({ name, store, args, after, onError }) => {
//   if (name === 'disableController') {
//     after((res) => {
//       disabled.value = lineStore.disable
//       //如是isshow为ture,则置为fasle
//       if (isshow.value) {
//         isshow.value = false
//       }
//     })
//   }
// })

function saveToImage(_viewer) {
  // 不写会导出为黑图
  _viewer.render()

  let canvas = _viewer.scene.canvas
  let image = canvas
    .toDataURL('image/png')
    .replace('image/png', 'image/octet-stream')

  let link = document.createElement('a')
  let blob = dataURLtoBlob(image)
  let objurl = URL.createObjectURL(blob)
  link.download = 'scene.png'
  link.href = objurl
  link.click()
}

function dataURLtoBlob(dataurl) {
  let arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], {
    type: mime,
  })
}
</script>

<style scoped>
.box {
  position: absolute;
  width: 1.5%;
  height: 100px;
  right: 27%;
  bottom: 10%;
  gap: 10px;
  display: flex;
  flex-direction: column;
  z-index: 199;
  pointer-events: all;
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #bb7e08;
  z-index: 299;
}

i.iconfont {
  font-size: 18px;
  color: #bb7e08;
}
.lineBox {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: 30%;
  bottom: 10%;
  z-index: 399;
  border: 1px solid #ccc;
  padding: 10px;
  color: pink;
  pointer-events: all;
}

.selectAll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}
.selectAll input[type='checkbox'] {
  cursor: pointer;
}
.lineItem {
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}
.lineItem input[type='checkbox'] {
  margin-right: 25px;
  cursor: pointer;
}
.title.active {
  background-color: rgba(187, 126, 8, 0.4);
  color: white;
}
.disabled {
  pointer-events: none; /* 禁用所有指针事件 */
  cursor: not-allowed;
}
</style>
